import { observer } from 'mobx-react-lite'
import { useTodoStore } from '../store/todoStore'

function AddTodo() {
  const todoStore = useTodoStore()
  function AddTodo(event) {
    if (event.key === 'Enter') {
      const taskName = event.target.value
      if (taskName.trim().length === 0) return
      const { todoAdd } = todoStore
      todoAdd(taskName)
      event.target.value = ''
    }
  }
  return (
    <header className="header">
      <h1>todos</h1>
      <input className="new-todo" placeholder="What needs to be done?" onKeyUp={AddTodo} />
    </header>
  )
}

export default observer(AddTodo)
